import React,{Component} from 'react';
import {Carousel} from 'element-react';


import {getBanner} from '../../service/api';
import {BlockHead} from './component';

import './home.less'

interface State {
    playlist:any[],
    banners:Banner[]
}

export default  class Home extends Component<{},State>{

    constructor(prop){
        super(prop);
        this.state  = {
            playlist:[],
            banners:[]
        }
        
    }
    componentWillMount(){
        this.loadBanner();
    }

    loadBanner(){
        getBanner().then(res=>{
            console.log(res)
            this.setState({banners:res})
        })
    }

    render(){
        return (<div className="home-page">

            <div className="left">
                <div className="banner-container">
                    <div className="banner">
                        <Carousel height="300px" indicatorPosition="outside">
                            {
                                this.state.banners.map(banner=>(<Carousel.Item key={banner.picUrl}>
                                    <img   src={banner.picUrl} alt=""/>
                                </Carousel.Item>))
                            }
                        </Carousel>
                    </div>
                </div>

                <div className="block">
                    <BlockHead title={{name:'热门推荐',url:'/playlist/hot'}} subTitles={[{name:'华语',url:'playlist/hot'}]}/>
                </div>
            </div>
            <div className="right">
            
            </div>
            
        </div>)
    }
}